<template>
  <div class="index">
    <el-container>
      <el-header height="60px">
        <div class="img">
          <img src="@/assets/imgs/logo.png" alt="">
          <div class="title">
            没有名字的系统
          </div>
        </div>

        <div class="buttongroup">
          <el-button @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="iscollapse?'64px':'200px'">
          <div class="switchover" @click="iscollapse = !iscollapse">
            <span>|||</span>
          </div>
          <el-menu unique-opened
                   background-color="#313743"
                   :default-active="activepath"
                   class="el-menu-vertical-demo"
                   active-text-color="#409bff"
                   text-color="#fff"
                   router
                   :collapse="iscollapse"
                   :collapse-transition="false"
                   @open="handleOpen"
                   @close="handleClose">
            <el-submenu :index="item.path" v-for="(item,index) in meauList" :key="index" :popper-append-to-body="item.chlidren.length>0">
              <template #title>
                <i :class="iconObj[item.id]"></i>
                <span>{{item.title}}</span>
              </template>
              <el-menu-item v-for="(itm,idx) in item.chlidren" :key="idx" :index="itm.path" @click="saveActive(itm.path)">
                <span>{{ itm.title }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {

name: "Home",
  setup(){

  },
  methods:{
    logout(){
      window.sessionStorage.clear()
      this.$router.push("/login")
    },
    saveActive(path){
      window.sessionStorage.setItem("activepath",path)
      this.activepath = window.sessionStorage.getItem("activepath")
    }
  },
  data(){
    return{
      meauList:[
        {id:101,title:"用户管理",chlidren:[{title:"用户列表",path:"/userlist"},],path:"101"},
        {id:102,title:"权限管理",chlidren:[{title:"用户列表",path:"/auth"},],path:"102"},
        {id:103,title:"商品管理",chlidren:[{title:"用户列表",path:"/good"},],path:"103"},
        {id:104,title:"订单管理",chlidren:[{title:"用户列表",path:"/order"},],path:"104"},
        {id:105,title:"数据统计",chlidren:[{title:"用户列表",path:"/data"},],path:"105"},
      ],
      iconObj: {
        '101':"el-icon-user-solid",
        '102':"el-icon-s-tools",
        '103':"el-icon-s-goods",
        '104':"el-icon-s-order",
        '105':"el-icon-s-marketing",
      },
      iscollapse:true,
      activepath:"",

    }
  },
  created() {
    this.activepath = window.sessionStorage.getItem("activepath")
    // this.iscollapse = false;
  }
}
</script>

<style scoped lang="less">
.switchover{
  height: 35px;
  background-color: #475164;
  color: #ffffff;
  line-height: 35px;
  text-align: center;
  letter-spacing: 0.2rem;
  cursor:pointer;
}
.el-menu{
  border-right: none;
}
.index{
  width: 100%;
  height: 100%;
}
.title{
  font-size: 20px;
  color: #ffffff;
  padding-left: 15px;
}
.img{
  display: flex;
  width: 220px;
  align-items: center;
  height: 60px;
  img{
    height: 60px;
  }
}

.el-header {
  padding-left: 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
  background-color: #363D40;
  color: #333;
  text-align: center;
  /*line-height: 200px;*/
}

.el-aside {
  background-color: #313743;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  //line-height: 160px;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-menu{
  color: #ffffff;
}
</style>